<template>
	<view>
		<uni-popup ref="tableOPVisit" type="bottom" background-color="#fff">
			<view style="height: 300rpx">
				<u-list>
					<u-list-item>
						<u-button size="large" class="option" text="查看表结构" @click="toTableStructure()">
						</u-button>
					</u-list-item>
					<u-list-item>
						<u-button size="large" class="option" text="删除表" @click="openDeleteTable()"></u-button>
					</u-list-item>
					<u-list-item>
						<u-button size="large" class="option" text="查看表数据" @click="toTableInfo()"></u-button>
					</u-list-item>
				</u-list>
			</view>
		</uni-popup>

		<uni-popup ref="deleteTableVisit" type="dialog">
			<uni-popup-dialog title="删除数据库" mode="base" message="成功消息" :duration="2000" :before-close="true"
				@close="closeDeleteTable()" @confirm="confirmDeleteTable()">
			</uni-popup-dialog>
		</uni-popup>

		<uni-fab :pattern="pattern" horizontal="right" vertical="bottom" @fabClick="toAddTable()"></uni-fab>

		<u-list>
			<u-list-item v-for="(item, index) in tables" :key="index">
				<u-cell :title="item.name" @click="openTableOP(index)">
					<u-icon slot="right-icon" name="arrow-right" />
				</u-cell>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	import {
		selectAllTable,
		delTable
	} from '@/api/database/mysql/index.js'
	export default {
		components: {},
		data() {
			return {
				tables: [],
				id: 0,
				name: '',
				// 标记当前被点击的表
				currentTable: 0,
				pattern: {
					buttonColor: '#fff'
				}
			}
		},
		onLoad(option) {
			this.id = option.id
			this.name = option.name
		},
		onShow() {
			this.doSelectAllTable()
			plus.screen.lockOrientation('portrait-primary');
		},
		onReady() {
			this.pattern.buttonColor = uni.getStorageSync('backgroundColor')
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: uni.getStorageSync('backgroundColor')
			})
		},
		methods: {
			openTableOP(index) {
				this.currentTable = index
				this.$refs.tableOPVisit.open()
			},
			toTableStructure() {
				uni.navigateTo({
					url: '/pages/database/mysql/tableStructure?id=' + this.id + "&name=" + this.name + '&tableName=' + this.tables[this.currentTable].name
				})
			},
			openDeleteTable() {
				this.$refs.deleteTableVisit.open()
			},
			confirmDeleteTable() {
				this.$refs.deleteTableVisit.close()
				this.$refs.tableOPVisit.close()
				this.doDelTable()
			},
			closeDeleteTable() {
				this.$refs.deleteTableVisit.close()
			},
			toTableInfo() {
				this.$refs.tableOPVisit.close()
				uni.navigateTo({
					url: '/pages/database/mysql/tableInfo?id=' + this.id + "&name=" + this.name + '&tableName=' + this.tables[this.currentTable].name
				})
			},
			toAddTable() {
				this.$refs.tableOPVisit.close()
				uni.navigateTo({
					url: '/pages/database/mysql/addTable?id=' + this.id + "&name=" + this.name
				})
			},
			doSelectAllTable() {
				selectAllTable({
					id: this.id,
					name: this.name
				}).then(res => {
					this.tables = res.data
				})
			},
			doDelTable() {
				delTable({
					id: this.id,
					name: this.tables[this.currentTable].name
				}).then(res => {
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					})
					
					this.doSelectAllTable()
				})
			}
		}
	}
</script>

<style>
	.button {
		margin: 30rpx;
		width: 40rpx;
		height: 25rpx;
		font-size: 5rpx;
	}
</style>
